<template>
    <div class="language-box">
        <el-select 
            class="ChangChunEhlSelect"
            popper-class="ChangChunEhlSelectPopper"
            size="mini"
            v-model="value" 
            @change="changeLang"
            :placeholder="$t('Byname20')">
            <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.title"
                :value="item.id">
            </el-option>
        </el-select>
    </div>
  </template>
  <script>
    export default {
        name: 'LanguageBox',
        props: {},
        data() {
            return {
                visible: false,
                options: [
                    {title:'中文', id: 'zh-CN'},
                    {title:'English', id: 'en'},
                    {title:'日文', id: 'ja'},
                ],
                value: ''
            }
        },
        created() {
            this.value = window.$globalConfig.language
        },

        methods: {
            changeLang(e){
                console.log('this.i18n', e)
                this.$i18n.locale = e;
                this.$eventBus.$emit('change-Language')
            }
        }
    }
</script>
<style lang="scss">
    //选择框样式
    .ChangChunEhlSelect {

        &.el-select {
            .el-select__tags{
                max-width: 100% !important;
                .el-tag.el-tag--info{
                    background-color: #21406f !important;
                    border-color: #21406f !important;
                    color: #fff !important;
                }
            }
            // 输入框样式
            .el-input__inner {
                color: #ebf4ff;
                font-size: 18px;
                background: #fff0;
                border-color: #fff0;

                &::placeholder {
                    color: #b0d5ff;
                }
            }

            .el-input.is-focus .el-input__inner {
                border-color: #fff0 !important;
            }
        }
    }
    //选择框弹出框样式
    .ChangChunEhlSelectPopper {
        &.el-select-dropdown {
            background-color: #21406f;
            border: none;
            border-radius: 8px;
            box-shadow: 0 2px 11px 0 rgb(0 0 0 / 8%);
        }

        &.el-popper[x-placement^='bottom'] .popper__arrow::after {
            top: 0;
            border-bottom-color: #21406f;
        }

        .el-select-dropdown__item {
            color: #fff !important;

            &.selected {
                color: #fff !important;
                background-color: rgb(172 202 255 / 30%) !important;
            }
        }

        .el-select-dropdown__item.hover,
        .el-select-dropdown__item:hover {
            background-color: rgb(172 202 255 / 30%);
        }
    }
</style>
<style scoped lang="scss">
.language-box {
    position: absolute;
    z-index: 101;
    width: 240px;
    height: 60px;
    display: flex;
    align-items: center;
    .el-select {
        width: 220px;
    }
}
</style>
  